<template>
  <a-card class="table2" :bordered="false">
    <a-form ref="formRef" :model="form" size="medium" auto-label-width>
      <a-form-item label="应用名称" field="name">
        <a-input v-model="form.name" placeholder="请输入应用名称" />
      </a-form-item>
      <a-form-item label="图标" field="path">
        <MsUpload v-model="form.path" placeholder="请上传图标"></MsUpload>
      </a-form-item>
      <a-form-item label="应用类型" field="type">
        <a-radio-group v-model="form.type">
          <a-radio :value="1">工具类</a-radio>
          <a-radio :value="2">营销类</a-radio>
          <a-radio :value="3">辅助类</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="应用路径" field="url">
        <a-input v-model="form.url" placeholder="请输入应用路径" />
      </a-form-item>
      <a-form-item label="是否有效" field="invisible">
        <a-switch :checked-value="1" :unchecked-value="0" v-model="form.invisible"></a-switch>
      </a-form-item>
      <a-form-item field="sort" label="排序">
        <a-input-number placeholder="请输入排序" v-model="form.sort" allow-clear></a-input-number>
      </a-form-item>
      <a-form-item>
        <a-space class="mt-20">
          <a-button type="primary" :loading="loading" @click="onOk">提交</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script setup>
import { applicationMenuAdd, applicationMenuEdit } from '@/apis'
import { reAssign } from '@/utils/common'
import { Message } from '@arco-design/web-vue'
import $bus from '@/utils/bus'
import { useTabsStore } from '@/store'

defineOptions({ name: 'homeSettingEdit' })

const route = useRoute()
const tabsStore = useTabsStore()
const formRef = ref()
const loading = ref(false)

const form = reactive({
  id: undefined,
  name: undefined,
  path: undefined,
  type: undefined,
  url: undefined,
  sort: 1,
  invisible: 1
})

// 初始化表单值
onMounted(() => {
  let formO = false
  const key = route.fullPath
  if (sessionStorage.getItem(key) || history.state.item) {
    if (history.state.item) {
      sessionStorage.setItem(key, history.state.item)
    } else {
      history.state.item = sessionStorage.getItem(key)
    }
    formO = JSON.parse(history.state.item)
  }
  reAssign(form, formO)
  form.invisible = form.invisible ?? 1
  form.sort = form.sort ?? 1
  tabsStore.changeTagTitle(form.id ? '应用编辑' : '应用新增')
})

// 点击确认添加/编辑
const onOk = async () => {
  const validateResult = await formRef.value?.validate()
  if (validateResult) return false
  try {
    loading.value = true
    const api = form.id ? applicationMenuEdit : applicationMenuAdd
    await api(form)
    $bus.emit('homeSetting')
    Message.success('操作成功')
    tabsStore.closeCurrent(route.fullPath, { name: 'homeSetting' })
  } finally {
    loading.value = false
  }
}

provide('formRef', formRef)
</script>
<style lang="scss" scoped>
.table2 {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
